<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      .wrap {
        width: 300px;
        margin: 100px auto 0;
      }

      table {
        border-collapse: collapse;
        border-spacing: 0;
        border: 1px solid #c0c0c0;
      }

      th,
      td {
        border: 1px solid #d0d0d0;
        color: #404060;
        padding: 10px;
      }

      th {
        background-color: #09c;
        font: bold 16px "微软雅黑";
        color: #fff;
      }

      td {
        font: 14px "微软雅黑";
      }

      tbody tr {
        background-color: #f0f0f0;
      }

      tbody tr:hover {
        cursor: pointer;
        background-color: #fafafa;
      }
    </style>
    <script src="./jquery-1.11.1.js"></script>
    <script>
      $(function () {
        $("#j_cbAll").click(function () {
          if ($("#j_cbAll").prop("checked")) {
            $("#j_tb input").prop("checked", true);
          } else {
            $("#j_tb input").prop("checked", false);
          }
        });
        $("#j_tb input").click(function () {
          if ($("#j_tb input:checked").length === $("#j_tb input").length) {
            $("#j_cbAll").prop("checked", true);
          } else {
            $("#j_cbAll").prop("checked", false);
          }
        });
      });
    </script>
  </head>
  <body>
    <div class="wrap">
      <table>
        <thead>
          <tr>
            <th>
              <input type="checkbox" id="j_cbAll" />
            </th>
            <th>课程名称</th>
            <th>所属学院</th>
          </tr>
        </thead>
        <tbody id="j_tb">
          <tr>
            <td>
              <input type="checkbox" />
            </td>
            <td>JavaScript</td>
            <td>前端与移动开发学院</td>
          </tr>
          <tr>
            <td>
              <input type="checkbox" />
            </td>
            <td>css</td>
            <td>前端与移动开发学院</td>
          </tr>
          <tr>
            <td>
              <input type="checkbox" />
            </td>
            <td>html</td>
            <td>前端与移动开发学院</td>
          </tr>
          <tr>
            <td>
              <input type="checkbox" />
            </td>
            <td>jQuery</td>
            <td>前端与移动开发学院</td>
          </tr>
          <!--<tr>
                    <td><input type="checkbox"/></td>
                    <td>HTML5</td>
                    <td>前端与移动开发学院</td>
                </tr>
                <tr>
                    <td><input type="checkbox"/></td>
                    <td>CSS3</td>
                    <td>前端与移动开发学院</td>
                </tr>-->
        </tbody>
      </table>
    </div>
  </body>
</html>
